<template>
  <div>
    <v-group
      ref="taskBox"
      @click="clickNode"
      @mousemove="mouseMove"
      @mouseout="showPop = false"
      :config="{
        x: x,
        y: y,
        draggable: isDraggable,
      }"
    >
      <!-- icon -->
      <v-image
        :config="{
          name: 'icon',
          width: width - 116,
          height: height - 116,
          offset: {
            x: width / 2 - 58,
            y: height / 2 - 58,
          },
          image: icon,
        }"
      />

      <v-image
        ref="outLineImage"
        :config="{
          name: 'outLineImage',
          width: width,
          height: height,
          offset: {
            x: width / 2,
            y: height / 2,
          },
          image: outLineImage,
          shadowColor: showPop ? '#563339' : '',
          shadowBlur: 10,
        }"
      />
      <v-ring
        :config="{
          innerRadius: width / 2 - 26,
          outerRadius: width / 2 - 28,
          fill: '#283743',
        }"
      />
      <v-image
        ref="middleRingImage"
        :config="{
          name: 'middleRingImage',
          width: width - 60,
          height: height - 60,
          offset: {
            x: width / 2 - 30,
            y: height / 2 - 30,
          },
          image: middleRingImage,
        }"
      />
      <!-- 最内圈 -->
      <v-image
        v-if="taskProgressNum < 100"
        ref="innerRingImage"
        :config="{
          name: 'innerRingImage',
          width: width - 80,
          height: height - 80,
          offset: {
            x: width / 2 - 40,
            y: height / 2 - 40,
          },
          image: innerRingImage,
        }"
      />
      <v-ring
        v-else
        :config="{
          innerRadius: width / 2 - 47,
          outerRadius: width / 2 - 40,
          fill: '#283743',
        }"
      />

      <!-- 进度条 -->
      <v-arc
        v-if="taskProgressNum < 100"
        :config="{
          innerRadius: width / 2 - 26,
          outerRadius: width / 2 - 13,
          angle: (180 * this.taskProgressNum) / 100,
          fillLinearGradientStartPoint: { x: -50, y: -height * 0.2 },
          fillLinearGradientEndPoint: { x: 0, y: height * 0.3 },
          fillLinearGradientColorStops: [
            0,
            '#d14e4ed6',
            0.5,
            '#d14e4ea1',
            1,
            '#d14e4e38',
          ],
          rotation: -250,
        }"
      />
      <!-- 进度百分比 -->
      <v-text-path
        v-if="taskProgressNum < 100"
        :config="{
          data: 'M -56, 0 a 56,56 0 1, 1 0, 1 z',
          text: taskProgressNum + '%',
          fontSize: 14,
          fontStyle: 'bold',
          fill: '#FCA653',
          rotation: 295 + (180 * this.taskProgressNum) / 100,
        }"
      />

      <!--节点底部标题 -->
      <v-text
        :config="{
          visible: !isShowPop && !showPop,
          x: -taskTitle.replace(/\\n/g, '').length * 7,
          y: width / 2 + 8,
          text: taskTitle.replace(/\\n/g, ''),
          fontSize: 14,
          fontStyle: 'bold',
          fill: '#fff',
        }"
      />

      <v-group
        :config="{
          visible: isShowPop || showPop,
          x: -width / 2 + 108,
          y: -width / 2 - 10,
        }"
      >
        <v-image
          ref="popLoadingImage"
          :config="{
            name: 'popLoadingImage',
            width: 210,
            height: 75,
            image: taskProgressNum === 100 ? popReadyImage : popLoadingImage,
            shadowColor: showPop ? '#563339' : '',
            shadowBlur: 10,
          }"
        />
        <v-image
          v-if="taskProgressNum < 100"
          ref="innerRingImageGrey"
          :config="{
            name: 'innerRingImageGrey',
            x: 56,
            y: 30,
            width: 30,
            height: 30,
            offset: {
              x: 15,
              y: 15,
            },
            image: innerRingImageGrey,
          }"
        />
        <!-- 任务标题 -->
        <!--  fill: taskProgressNum === 100 ? '#fff' : '#475965', -->
        <v-text
          :config="{
            x: 86,
            y: 40,
            text: taskTitle.replace(/\\n/g, '\n'),
            fontSize: 14,
            fontStyle: 'bold',
            fill: '#fff',
          }"
        />

        <!-- 任务进度 -->
        <v-text
          v-if="taskProgressNum < 100"
          :config="{
            x: 160,
            y: 10,
            text: taskProgressNum + ' %',
            fontSize: 14,
            fontStyle: 'bold',
            fill: '#FCA653',
          }"
        />
      </v-group>
    </v-group>
  </div>
</template>

<script>
export default {
  props: {
    x: {
      type: Number,
      default: 120,
    },
    y: {
      type: Number,
      default: 320,
    },
    width: {
      type: Number,
      default: 150,
    },
    height: {
      type: Number,
      default: 150,
    },
    isDraggable: {
      type: Boolean,
      default: false,
    },
    isClick: {
      type: Boolean,
      default: false,
    },
    onMouseOver: {
      type: Boolean,
      default: false,
    },

    taskTitle: {
      type: String,
      default: '任务标题',
    },
    taskProgressNum: {
      type: Number,
      default: 0,
    },
    iconSrc: {
      type: String,
    },
    isShowPop: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      outLineImage: null,
      outLineImageSrc: require('@/assets/images/task/outLine.png'),
      middleRingImage: null,
      middleRingImageSrc: require('@/assets/images/task/middleRing.png'),
      innerRingImage: null,
      innerRingImageSrc: require('@/assets/images/task/innerRing.png'),
      icon: null,

      popReadyImage: null,
      popReadyImageSrc: require('@/assets/images/task/readyPop.png'),
      popLoadingImage: null,
      popLoadingImageSrc: require('@/assets/images/task/loadingPop.png'),
      innerRingImageGrey: null,
      innerRingImageGreySrc: require('@/assets/images/task/innerRing-grey.png'),

      showPop: false,
    };
  },
  created() {
    this.initImg();
  },
  mounted() {
    this.initAnimation();
  },
  methods: {
    initImg() {
      const outLineImage = new window.Image();
      outLineImage.src = this.outLineImageSrc;
      outLineImage.onload = () => {
        this.outLineImage = outLineImage;
      };

      const middleRingImage = new window.Image();
      middleRingImage.src = this.middleRingImageSrc;
      middleRingImage.onload = () => {
        this.middleRingImage = middleRingImage;
      };

      const innerRingImage = new window.Image();
      innerRingImage.src = this.innerRingImageSrc;
      innerRingImage.onload = () => {
        this.innerRingImage = innerRingImage;
      };

      const icon = new window.Image();
      icon.src = this.iconSrc;
      icon.onload = () => {
        this.icon = icon;
      };

      const popLoadingImage = new window.Image();
      popLoadingImage.src = this.popLoadingImageSrc;
      popLoadingImage.onload = () => {
        this.popLoadingImage = popLoadingImage;
      };

      const popReadyImage = new window.Image();
      popReadyImage.src = this.popReadyImageSrc;
      popReadyImage.onload = () => {
        this.popReadyImage = popReadyImage;
      };

      const innerRingImageGrey = new window.Image();
      innerRingImageGrey.src = this.innerRingImageGreySrc;
      innerRingImageGrey.onload = () => {
        this.innerRingImageGrey = innerRingImageGrey;
      };
    },
    initAnimation() {
      var angularSpeed = 60;
      const isFinish = this.taskProgressNum === 100;

      const outLineImage = this.$refs.outLineImage.getNode();
      const middleRingImage = this.$refs.middleRingImage.getNode();
      let innerRingImage, innerRingImageGrey;
      if (!isFinish) {
        innerRingImage = this.$refs.innerRingImage.getNode();
        innerRingImageGrey = this.$refs.innerRingImageGrey.getNode();
      }

      const ringAnimation = new Konva.Animation(function (frame) {
        var angleDiff = (frame.timeDiff * angularSpeed) / 1000;
        outLineImage.rotate(angleDiff);
        middleRingImage.rotate(-angleDiff);
        if (!isFinish) {
          innerRingImage.rotate(angleDiff);
          innerRingImageGrey.rotate(angleDiff);
        }
      });
      ringAnimation.start();
    },

    clickNode() {
      this.$emit('clickNode', 'taskBox');
    },

    mouseMove() {
      this.showPop = true;
      this.$emit('mouse-move');
    },
  },
};
</script>
